<template>
  <div class="box">
    <radio :is-select="isClickAll" @click.native="clickAll" />
    <div class="price">合计 &yen;{{ sumPrice }}</div>
    <div class="paly" @click="settlement">去结算({{ sumCount }})</div>
  </div>
</template>

<script>
// 自定义单选按钮
import Radio from "components/content/radio/Radio";

// vuex的方法   （Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：）
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      isSelect: true,
    };
  },

  components: {
    Radio,
  },
  computed: {
    // vuex方法获取数据
    ...mapGetters(["cartLength", "cartList"]),
    
    // 计算总价格
    sumPrice() {
      return this.cartList
        .filter((item) => item.select)
        .reduce((preValue, item) => {
          return preValue + item.price * item.count;
        }, 0)
        .toFixed(2);
    },

    // 计算总个数
    sumCount() {
      return this.cartList
        .filter((item) => item.select)
        .reduce((preValue, item) => {
          return preValue + item.count;
        }, 0);
    },

    // 判断是否全部选中
    isClickAll() {
      if (this.sumCount == 0) return (this.isSelect = false);
      return !this.cartList.find((item) => !item.select);
    },
  },

  methods: {
    // 全选按钮的单击
    clickAll() {
      if (this.isSelect) {
        this.isSelect = false;
        this.cartList.filter((item) => (item.select = false));
      } else {
        this.isSelect = true;
        this.cartList.filter((item) => (item.select = true));
      }
    },
    // 结算按钮的单击
    settlement() {
      if (this.sumPrice == 0) return this.$prompt.show("请选择商品后再结算");
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;

  height: 40px;
  line-height: 40px;
  background-color: #eee;

  text-align: center;
  font-size: 16px;
}

.price {
  flex: 1;
}

.paly {
  width: 80px;
  background-color: #ff8f96;
}
</style>